<template>
	<view class="media" v-if="fileList.length > 0">
		<view v-if="type == 'image'" class="media-item media-image" :class="{ single: fileList.length == 1 }" @tap.stop="previewPhoto" :data-index="index" v-for="(item, index) in fileList" :key="item.file_id" :style="{ width: singleImageStyle.width + 'px', height: singleImageStyle.height + 'px' }">
			<!--  -->
			<u-image :fade="false" border-radius="10" class="photo-image" width="100%" height="100%" :src="item.file.file_path" mode="aspectFill"></u-image>
		</view>

		<view class="media-item media-video" v-if="type == 'video'" @tap.stop="videoStatus = true">
			<image class="video-cover" :src="videoData.cover" mode="aspectFill" :class="{ horizontal: videoData.width > videoData.height, vertical: videoData.width < videoData.height }"></image>
			<image class="video-btn" src="@/static/images/moment/icon-video-play.png" @click="playVideo"></image>
			<!--  -->
			<video class="video-player" v-if="videoStatus" id="momentVideo" ref="momentVideo" @fullscreenchange="onVideoFullscreen" @play="onVideoPlay" :autoplay="true" :loop="true" :src="videoData.src"></video>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	props: {
		fileList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	watch: {
		fileList: {
			handler(newList, oldList) {
				if (newList.length > 0) {
					this.initFileList(newList);
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			singleImageStyle: {},
			type: 'image',
			videoData: {},
			videoStatus: false
		};
	},
	computed: {
		photoList: function() {
			const photoList = [];
			for (let i = 0; i < this.fileList.length; i++) {
				photoList.push(this.fileList[i].file.file_path);
			}
			return photoList;
		}
	},
	mounted() {},
	beforeDestroy() {},
	methods: {
		initFileList(fileList) {
			if (fileList.length == 1) {
				const firstFile = fileList[0];
				switch (firstFile.file_type) {
					case 'image':
						this.initImageFile(firstFile);
						break;
					case 'video':
						this.initVideoFile(firstFile);
						break;
					default:
						break;
				}
			}
		},
		initImageFile(file) {
			const smeta = JSON.parse(file.smeta || '{}');
			if (smeta.size) {
				const size = smeta.size;
				if (size.hasOwnProperty('width') && size.hasOwnProperty('height')) {
					const maxWidth = uni.upx2px(400);
					const maxHeight = uni.upx2px(600);
					const height = (maxWidth / size.width) * size.height;
					this.singleImageStyle = { width: size.width > maxWidth ? maxWidth : size.width, height: height > maxHeight ? maxHeight : height };
				}
			}
		},
		initVideoFile(file) {
			this.type = 'video';
			const smeta = JSON.parse(file.smeta || '{}');
			this.videoData = { src: file.file.file_path, ...smeta.size, cover: smeta.cover };
		},
		previewPhoto(e) {
			uni.previewImage({
				current: e.currentTarget.dataset.index,
				urls: this.photoList,
				indicator: 'number',
				loop: true
			});
		},
		playVideo() {
			this.videoStatus = true;
		},
		onVideoPlay() {
			const videoContext = uni.createVideoContext('momentVideo', this);
			console.log(this.videoData.width > this.videoData.height)
			console.log(this.videoData.width , this.videoData.height);
			videoContext.requestFullScreen({ direction: Number( this.videoData.width) > Number(this.videoData.height)  ? 90 : 0 });
		},
		onVideoFullscreen(e) {
			const fullScreen = e.detail.fullScreen;
			this.videoStatus = fullScreen;
			if (!fullScreen) {
				uni.createVideoContext('momentVideo', this).showStatusBar();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.media {
	margin-top: 18rpx;
	display: flex;
	flex-wrap: wrap;
	.media-item {
		border-radius: 10rpx;
		&.media-image {
			height: 200rpx;
			margin-right: 6rpx;
			margin-top: 6rpx;
			width: 200rpx;
			&:nth-child(-n + 3) {
				margin-top: 0;
			}
			&.single {
				width: 400rpx;
				height: auto;
			}
			.photo-image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		&.media-video {
			position: relative;
			.video-cover {
				width: 300rpx;
				height: 300rpx;
				&.horizontal {
					width: 400rpx;
				}
				&.vertical {
					height: 400rpx;
				}
			}
			.video-btn {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
			}
			.video-player {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}
	}
}
</style>
